<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        padding: 20% 40%;
    }
    .infrom{
        width: 150px;
        height: 150px;

    }
    .infrom button{
        float: right;
    }
</style>
<body>
    <div class="infrom">

        <form class="fm1">
            <div>
                <input type="text" placeholder="用户名" name="username">
            </div>
            <div>
                <input type="password" placeholder="密码" name="password">
            </div>
            <div>

                <button>提交</button>
            </div>
        </form>
    </div>
    
</body>
<script>
    /* url地址 */
    const url = 'http://192.168.1.11:3000'
    const api = '/api/login'

    var fm = document.getElementsByClassName('fm1')[0]
    var btn = document.getElementsByTagName('button')[0]
    var inp = document.getElementsByTagName('input')
    console.log(inp);
    btn.onclick = function(){
        window.event.preventDefault()
        var httpRequire = new XMLHttpRequest()
        httpRequire.open('POST',url+api,true)
        httpRequire.responseText = 'json'
        httpRequire.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

        function callback(data){
            data = JSON.parse(data)
            if(data.code == 200 ){
                alert('登陆成功')
                setTimeout(()=>{
                    console.log(111);
                    window.close()
                },1500)
            }else{
                alert('账号或密码错误')
            }
            
        }

        var params = `username=${inp[0].value}&password=${inp[1].value}`
        console.log(params);
        httpRequire.send(params)
        httpRequire.onreadystatechange = function(){
            
            if(httpRequire.readyState == 4 && httpRequire.status == 200){
                const json = httpRequire.responseText
                localStorage.setItem('user',json)
                callback(json)
            }
        }
    }
</script>
</html>